/*
 * @Author: silas 
 * @Date: 2021-03-15 11:14:56 
 * @Last Modified by: silas
 * @Last Modified time: 2021-04-30 18:48:39
 */

<template>
    <div class="g-wrapper">
        <div class="contentTopTitle">
            <div class="fl">
                <div class="title">云网-月账</div>
            </div>
        </div>
        <div>
            <el-form
                :inline="true"
                :model="form"
                label-width="80px"
                class="formList"
            >
                <el-form-item label="区域" size="mini">
                    <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
                </el-form-item>
                <el-form-item label="账期" size="mini">
                    <el-date-picker
                        v-model="form.time"
                        type="month"
                        placeholder="选择日期"
                        value-format="yyyyMM"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="业务类型" size="mini">
                    <el-select v-model="form.type2" clearable>
                        <el-option
                            v-for="(it, i) in typelist2"
                            :key="i"
                            :label="it.label"
                            :value="it.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 5%">
                    <el-button size="mini" type="primary" @click="search()"
                        >查询</el-button
                    >
                </el-form-item>
                <el-form-item style="width: 5%">
                    <el-button
                        size="mini"
                        style="margin-left: 10px"
                        type="orange"
                        @click="exportExcel"
                        >导出</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
       
        <div class="table-content">
            <div class="tableBox">
                <el-table
                    v-loading="tableLoading"
                    :data="tableData"
                    style="width: 100%"
                    class="tableTh28"
                    border
                    stripe
					id="table1"
                    :span-method="arraySpanMethod"
                    ref="table"
                >
                    <el-table-column
                        :label="theader"
                        prop="pname"
                        min-width="140"
                        fixed
                    ></el-table-column>
                    <el-table-column
                        min-width="120"
                        prop="incomeName"
                        label="财务数据"
                        fixed
                    ></el-table-column>
                    <el-table-column
                        min-width="120"
                        prop="acctMonth"
                        label="月份"
                        fixed
                    ></el-table-column>
                    <el-table-column
                        min-width="60"
                        prop="amountUnit"
                        label="单位"
                        fixed
                    ></el-table-column>
                    <el-table-column
                        min-width="120"
                        v-for="(it, i) in titles"
                        :key="i"
                        :label="it.headName"
                        :prop="'value' + i"
                    ></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import prefixAPI from "@/api/prefixAPI";
import { mergeRow } from "@/utils/mixin";
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

export default {
    name: "cloudMonth",
    data() {
        return {
            form: {
                areaId: '',
                time: '',
                type2: '', // 默认 云和大数据
            },
            typelist2: [],
            accountInfo: {},
            tableLoading: false,
            tableData: [],
            spanArr: [],
            titles: "",
            theader: '',
        };
    },
    created() {
        this.form.type2 = 6;
    },
    mounted() {
        var that = this;

        that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        that.form.areaId = that.accountInfo.areaId;
        that.initData();
    },
    methods: {
        async initData() {
            var that = this;

            // that.form.time = that.moment().format("YYYYMM");
            that.form.time = await that.getYears();
            that.typelist2 = await that.getTypeList();
            
            that.getData(that.form);
        },
        getYears() {
            var that = this, data = [];

            return new Promise(resolve => {
                $budgetAPI.getCloudFctBusinessYears({}, res=> {
                    if(res.code == 0) {
                        resolve(res.content);
                    }
                })
            })
        },
        getTypeList() {
            var that = this, data = [];

            return new Promise(resolve => {
                $budgetAPI.getCloudFctBusinessType({}, res=> {
                    if(res.code == 0) {
                        res.content.map((it, i) => {
                            var obj = {
                                value: i,
                                label: it
                            }
                            data.push(obj);
                        })
                        resolve(data);
                    }
                })
            })
        },
        getData(obj) {
            var that = this;

            that.tableLoading = true;
            that.tableData = [];
            $budgetAPI.getCloudFctBusinessDatas(
                {
                    areaId: obj.areaId,
                    years: obj.time.substr(0, 4),
                    acctMonth: obj.time.substr(-2),
                    indexCodes: obj.type2 ? that.typelist2[obj.type2].label : '',
                },
                (res) => {
                    if (res && res.code == 0) {
                        that.tableLoading = false;
                        that.spanArr = mergeRow(res.content.data, [
                            "prdtype", 'incomeName'
                        ]);
                        res.content.data.map((it, i) => {
                            it.dataList.map((item, index) => {
                                it["value" + index] = item.value;
                            });
                        });
                        that.tableData = res.content.data;
                        that.titles = res.content.titles.slice(4);
                        that.theader = res.content.titles[0].headName;
                        that.$nextTick(() => {
                            that.$refs.table.doLayout();
                        });
                    }
                }
            );
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0 || columnIndex == 1) {
                return (
                    this.spanArr.length && this.spanArr[rowIndex][columnIndex]
                );
            }
        },
        search() {
            var that = this;

            that.getData(that.form);
        },
        exportExcel() {
            var xlsxParam = {
                raw: true
            }; //转换成excel时，使用原始的格式，这样导出的时候数字过长不会变成科学计数法
            let workbook = XLSX.utils.book_new();
            let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table1'), xlsxParam);
            XLSX.utils.book_append_sheet(workbook, ws1, '云网-月账');
            let wbout = XLSX.write(workbook, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbout], {
                        type: 'application/octet-stream;charset=utf-8"'
                    }),
                    '云网-月账.xlsx'
                );
            } catch (e) {
                if (typeof console !== 'undefined') console.log(e, wbOut);
            }
            return wbout;
        },
    },
};
</script>

<style lang="scss" scoped>
.g-wrapper {
    .table-content {
        .table-header {
            display: flex;
            justify-content: space-between;
            .btn-right {
                display: flex;
            }
            .table-title {
                font-size: 14px;
                font-weight: bold;
                height: 30px;
                line-height: 30px;
                span {
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    background-color: #418ee9;
                    border-radius: 1000%;
                    overflow: hidden;
                    margin-right: 10px;
                    margin-bottom: 3px;
                }
            }
        }
        .content {
            position: relative;
        }
    }
}
/deep/ .el-form-item--mini .el-form-item__content {
	line-height: 35px;
}
</style>
